<template>
  <div class="cityDialog">
    <el-dialog :visible.sync="this.isVisible" :show-close="showClose" @closed="cancel" width="900px" class="dialog-select-city">
      <div slot="title" class="dialog-title clearfix">
        <div class="dialog-title-left">
          选择城市
          <span v-show="this.isTip">(最多选1项)</span>
          </div>
        <div class="dialog-title-right">
          <button class="confirm-btn" @click="confirm()">确定</button>
          <button class="cancel-btn" @click="cancel">取消</button>
        </div>
      </div>
      <div class="selectd-city">
        <div class="selectd-city-title">
          已选城市
          <div v-if="this.city">
            <el-tag v-for="(item, index) in this.city" :key="index" closable @close="closeCity(index)">{{item.name}}</el-tag>
          </div>
        </div>
      </div>
      <div class="hot-city">
        <div class="hot-city-title">热门城市</div>
        <ul class="hot-city-content clearfix">
          <li v-for="(item, index) in hotCitys" :key="index" @click="selectedHotCity(item.dictname, item.dictid)">{{item.dictname}}</li>
        </ul>
      </div>
      <div class="all-province">
        <div class="all-province-title">所有省份</div>
        <div class="all-province-content">
          <el-dropdown v-for="(item1, index1) in allProvinces" :key="index1" @command="handleCommand" v-if="item1.subLevelModelList.length !== 1">
            <span class="el-dropdown-link">
              {{item1.name}}
              <i class="el-icon-arrow-down el-icon-right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item2, index2) in item1.subLevelModelList" :key="index2" :command="{name:item2.name, code: item2.code}">{{item2.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span class="special" v-for="item3 in oneCity" :key="item3.name" @click="specialHandle(item3.subLevelModelList[0].name, item3.subLevelModelList[0].code)">{{item3.name}}</span>
        </div>
      </div>
      <div class="nationwide">
        <div class="nationwide-title">选择所有</div>
        <div class="nationwide-cotent">
          <span @click="selectedNationwide()">全国</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./cityDialog.js">
</script>

<style src="./cityDialog.css" scoped>
</style>
